<template>
    <view class="content">
        <image src="/static/image/bbgg.jpg" class="rbng"></image>
        <u-navbar title="牛市日历" back-icon-color="#fff" title-color="#fff" :border-bottom="false" :background="background"></u-navbar>
        
        <view class="topx">
            <view class="leftx">
                <view class="nums">{{currentDay}}</view>
                <view class="posz">
                    <view class="wea" v-if="weather">天气：{{ weather }}</view>
                    <view class="orlz">{{currentYear}}/{{currentMonth + 1}} 星期{{week}}</view>
                </view>
            </view>
            <!-- <button class="btnx">订阅日历</button> -->
        </view>
        
        <view class="box">
        	<view class="row title">
        		<text class="text" v-for="(item, index) in title" :key="item">{{item}}</text>
        	</view>
        	<view class="row center">
                <!-- 上个月 -->
        		<view v-for="(item, index) in firstMonth" :key="index+'A'" class="grey text-item">
                    <view class="u-m-b-10">{{item + 1}}</view>
                    <view class="zhanwei"></view>
                    <view class="zhanwei"></view>
                </view>
                <!-- 本月 -->
                <template>
                    <view class="text-item" v-for="(item, index) in dayList" :key="item.name" @click="chooseDay(item)">
                        
                        <template v-if="data && data.length > 0">
                            <view class="tian" :class="{ jintian: item.name == currentDay}">{{ item.name }}</view>
                            <view class="dizhi" v-for="(el, ind) in item.cattle_karket_list" :key="ind" v-if="ind < 2"
                                :style="{backgroundColor: el.backgound_color, color: el.font_color}">
                                {{el.simple_name || ''}}
                            </view>
                        </template>
                        
                        <template v-else>
                            <view class="tian" :class="{ jintianwu: item.name == currentDay}">{{ item.name }}</view>
                            <view class="dizhi" v-for="(el, ind) in 2" :key="ind"></view>
                        </template>
                    </view>
                </template>
                <!-- 下个月 -->
        		<view v-for="(item, index) in lastMonth" :key="index+'B'" class="grey text-item">
                    <view class="u-m-b-10">{{item + 1}}</view>
                    <view class="zhanwei"></view>
                    <view class="zhanwei"></view>
                </view>
        	</view>
        </view>

        <view class="btznx">
            <button open-type="share" class="share">分享给好友</button>
            <button open-type="share" class="save">保存到相册</button>
        </view>

        <u-popup :border-radius="18" v-model="showx" mode="center" :closeable="true">
            <view class="datx">
                <image src="/static/image/s_bh.png" class="bgg"></image>
                <view class="ctnnn">
                    <view class="titlex">
                        <image src="@/static/icon/datx.png" class="ico"></image>
                        <text class="dat">{{currentMonth + 1}}月{{ item.name }}日</text>
                    </view>
                    <view class="zxz">今日牛市</view>

                    <view class="addx" v-for="(el, ind) in item.cattle_karket_list" :key="ind">
                        <view class="titlep">{{el.name}}</view>
                        <view class="supx">{{el.address}}</view>
                        <view class="times">{{el.open_time}}</view>
                        <image src="/static/icon/locx.png" class="ico" @click.stop="toGuide(el)"></image>
                    </view>
                    
                    <view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="item.cattle_karket_list.length == 0">暂无相关信息</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                background: {backgroundColor: 'transparent'},
                showx: false,
                
                title: ['日','一','二','三','四','五','六'],
                currentDay: '',
                currentMonth: '',
                currentYear: '',
                dayList: [],//本月日历
                cday: '',
                jintian: '',//今日
                week: '',//星期几
                weather: '',//天气
                data: [],
                item: {},
            };
        },
        onShareAppMessage(res) {
        	return {
                title: '五二智农',
                path: '/pages/tabbar/index'
        	}
        },
        onLoad(option) {
            this.currentYear = new Date().getFullYear();
            this.currentMonth = new Date().getMonth();
            this.currentDay = new Date().getDate();
            this.week = this.title[new Date().getDay()]
            
            this.getList()
            
            this.getSetting()
        },
        computed:{
        	currentMonthChinese(){
        		return new Date(this.currentYear, this.currentMonth).toLocaleString('default', {month: 'short'});
        	},
        	currentDays(){
        		return new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
        	},
        	firstMonth(){
        		// 先获取上个月有多少天
        		const lastMonthDays = new Date(this.currentYear, this.currentMonth, 0).getDate();
        		// 获取上个月在下个月有几天
        		const lastInThisMonth = new Date(this.currentYear, this.currentMonth, 1).getDay();
        		// 要根据剩余天数切割数组，如果上个月剩余0天，则整个数组应为空；
        		const filterDay = !lastInThisMonth ? lastMonthDays : -lastInThisMonth;
        		// slice array
        		return Array.from(Array(lastMonthDays).keys()).slice(filterDay);
        	},
        	lastMonth(){
        		// 先获取下个月有多少天
        		const lastMonthDays = new Date(this.currentYear, this.currentMonth + 2, 0).getDate();
        		// 获取下个月在本月有几天
        		const lastInThisMonth = 7 - (new Date(this.currentYear, this.currentMonth + 1, 1).getDay());
        		// 如果0天或7天，则整个数组应为空；
        		const filterDay = !lastInThisMonth ? '' : (lastInThisMonth == 7 ? '' : lastInThisMonth);
        		// slice array
        		return Array.from(Array(lastMonthDays).keys()).slice(0,filterDay);
        	}
        },
        methods: {
            // 获取天气
            getSetting(){
                var _this = this
                uni.getLocation({
                    type: 'gcj02',
                    success(res) {
                        console.log('getLocation',res)
                        let log = res.longitude;
                        let lat = res.latitude;
                        
                        _this.$qqmapsdk.reverseGeocoder({
                            location: {
                                latitude: lat,
                                longitude: log
                            },
                            success: function(res) {
                                console.log(res);
                                let result = res && res.result && res.result.ad_info
                                let p = result.province
                                let c = result.city
                                let d = result.district
                                // https://wis.qq.com/weather/common?source=pc&weather_type=observe|forecast_1h|forecast_24h|index|alarm|limit|tips|rise&province=上海&city=上海&county=浦东新区
                                uni.request({
                                    url: `https://wis.qq.com/weather/common?source=pc&weather_type=observe&province=${p}&city=${c}&county=${d}`,
                                    method: 'GET',
                                    dataType: "json",
                                    success(res) {
                                        console.log('GET',res)
                                        _this.weather = res&&res.data&&res.data.data&&res.data.data.observe&&res.data.data.observe.weather
                                    }
                                })
                            },
                            fail: function(error) {
                                console.error(error);
                                // _this.getSetting()
                            },
                        })
                    },
                    fail(err) {
                        uni.showModal({
                            title: '温馨提示',
                            content: '检测到您没打开定位权限，是否去设置打开？',
                            success: function (res) {
                                if (res.confirm) {
                                    wx.openSetting()
                                }
                            }
                        })
                    }
                })
            },
            
            chooseDay(item) {
                this.item = item
                this.showx = true
            },
            
            //导航
            toGuide(el) {
                uni.openLocation({
                    latitude: Number(el.lat),
                    longitude: Number(el.lng),
                    address: el.address,
                    success: (res) => {
                        console.log('success');
                    },
                    fail: (err) => {
                        console.log(err)
                        this.$toast('导航失败，请重试！')
                    }
                });
            },
            
            getList() {
            	this.$ajax('calendar', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
                        this.data = ret.data.list
                        
                        var mm = new Date().getMonth() + 1,
                            cm = this.currentMonth + 1
                        this.jintian = new Date().getDate();
                        
                        this.dayList = [];
                        if (!this.cday) {
                            this.cday = this.currentDays
                        }
                        for (var i = 0; i < this.cday; i++) {
                            this.dayList.push({
                                name: i + 1,
                                cattle_karket_list: [],
                            })
                        }
                        
                        // 有创建牛市，status=1有牛市
                        if (ret.data && ret.data.list.length > 0) {
                            this.dayList.forEach((cur, index) => {
                                ret.data.list.forEach((el) => {
                                    if (cur.name == el.day && el.cattle_karket_list && el.cattle_karket_list.length > 0) {
                                        cur.cattle_karket_list = cur.cattle_karket_list.concat(el.cattle_karket_list)
                                    }
                                })
                            })
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style scoped lang="scss">
    
    .box{
        padding: 30rpx 15rpx;
        margin: 40rpx 20rpx;
        font-size: 26rpx;
        background: rgba(255, 255, 255, .8);
        border-radius: 20rpx;
    }
    .title{
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
        padding: 0 10rpx;
        font-weight: bold;
    }
    .text{
    	width: calc(540rpx / 7);
    	height: calc(540rpx / 7);
    	text-align: center;
    	line-height: calc(540rpx / 7);
        margin: 10rpx;
    }
    .text-item{
        width: calc(540rpx / 7);
        height: 130rpx;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin: 10rpx;
    }
    .tian{
        font-weight: bold;
        margin-bottom: 10rpx;
    }
    .jintian{
        width: 57rpx;
        height: 57rpx;
        background-color: #00734c;
        border-radius: 50%;
        text-align: center;
        line-height: 57rpx;
        color: #fff;
        // margin-bottom: 0;
        margin-top: -10rpx;
    }
    .jintianwu{
        width: 57rpx;
        height: 57rpx;
        background-color: #00734c;
        border-radius: 50%;
        text-align: center;
        line-height: 57rpx;
        color: #fff;
        margin-bottom: 75rpx;
    }
    
    .dizhi{
        width: 70rpx;
        height: 33rpx;
        border-radius: 6rpx;
        font-size: 18rpx;
        text-align: center;
        line-height: 33rpx;
        margin-bottom: 10rpx;
    }
    .zhanwei{
        width: 70rpx;
        height: 33rpx;
        background-color: transparent;
        margin-bottom: 10rpx;
    }
    
    .center{
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    	align-items: center;
    }
    .grey{
    	color: #919191;
    }
    .active{
        border-radius: 50%;
    	color: #fff;
    	background-color: #900400;
    }
    .miss{
        border-radius: 15rpx;
        color: #6d6d6d;
        background-color: #e6e6e6;
    }
    .rest{
        border-radius: 15rpx;
        color: #803906;
        background-color: #ffecd2;
    }
    .leave{
        border-radius: 15rpx;
        color: #900400;
        background-color: #e9c2c1;
    }
    
    
    
    
    
    .rbng {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100vh;
    }

    .topx {
        position: relative;
        width: 658rpx;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .leftx {
            color: #fff;
            display: flex;
            align-items: center;

            .nums {
                font-size: 96rpx;
                font-weight: 700;
                margin-right: 18rpx;
            }

            .posz {
                .wea {
                    display: inline-block;
                    border: 1rpx solid #fff;
                    padding: 0 10rpx;
                    color: #fff;
                    line-height: 36rpx;
                    text-align: center;
                    border-radius: 8rpx;
                    font-size: 22rpx;
                }

                .orlz {
                    font-size: 28rpx;
                    line-height: 40rpx;
                }
            }
        }

        .btnx {
            width: 156rpx;
            height: 62rpx;
            border-radius: 100px;
            background: #ff8a00;
            line-height: 62rpx;
            padding: 0;
            color: #fff;
            font-size: 28rpx;
            margin: 0;
        }

        .btnx {
            width: 156rpx;
            height: 62rpx;
            border-radius: 100px;
            background: #ff8a00;
            line-height: 62rpx;
            padding: 0;
            color: #fff;
            font-size: 28rpx;
            margin: 0;
        }
    }

    .btznx {
        width: 710rpx;
        display: flex;
        align-items: center;
        margin: 0 auto;
        justify-content: space-between;
        position: relative;

        .share {
            width: 340rpx;
            height: 94rpx;
            border-radius: 12rpx;
            color: #fff;
            line-height: 94rpx;
            font-size: 34rpx;
            margin: 0;
            padding: 0;
            background: #00734c;
        }

        .save {
            width: 340rpx;
            height: 94rpx;
            border-radius: 12rpx;
            color: #fff;
            line-height: 94rpx;
            font-size: 34rpx;
            margin: 0;
            padding: 0;
            background: #ff8a00;
            text-align: center;
        }
    }

    .datx {
        width: 600rpx;
        padding: 16rpx;
        position: relative;

        .bgg {
            position: absolute;
            left: 16rpx;
            top: 16rpx;
            width: 568rpx;
            height: calc(100% - 32rpx);
        }

        .ctnnn {
            width: 100%;
            position: relative;

            .titlex {
                display: flex;
                justify-content: center;
                align-items: center;
                padding-top: 10rpx;

                .ico {
                    width: 36rpx;
                    height: 36rpx;
                    margin-right: 14rpx;
                }

                .dat {
                    font-size: 40rpx;
                    color: #00734c;
                }
            }

            .zxz {
                text-align: center;
                font-size: 30rpx;
                line-height: 72rpx;
            }

            .addx {
                background: #fff;
                border: 1rpx solid #b4b6c2;
                width: 510rpx;
                // height: 184rpx;
                border-radius: 18rpx;
                margin: 0 auto 20rpx;
                position: relative;
                padding: 20rpx 30rpx;

                .titlep {
                    width: 410rpx;
                    font-size: 30rpx;
                    color: #22273b;
                    margin-bottom: 12rpx;
                }

                .supx {
                    font-size: 24rpx;
                    color: #7f8188;
                    margin-bottom: 10rpx;
                }

                .times {
                    display: inline-block;
                    border-radius: 4rpx;
                    background: #f8e4cb;
                    height: 42rpx;
                    line-height: 42rpx;
                    color: #895e34;
                    font-size: 20rpx;
                    padding: 0 20rpx;
                }

                .ico {
                    position: absolute;
                    width: 54rpx;
                    height: 54rpx;
                    right: 15rpx;
                    top: 15rpx;
                }
            }
        }
    }
</style>